<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <title>Pretty Input</title>
		<script src="../../commons/mootools.v1.11.js" type="text/javascript" charset="utf-8"></script>
		<script src="prettyinput.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" href="prettyinput.css" type="text/css" media="screen" title="no title" charset="utf-8">
		<style type="text/css" media="screen">
			body { background: #000;}
			#globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; }
			#globalsearch.active { background-position: 100% -38px; }
		</style>
		
		<script type="text/javascript" charset="utf-8">
			window.addEvent('domready', function() {
				new PrettyInput($('searchtext'));
			});
		</script>
</head>

<body>
	<div id="globalsearch">
		<form action="#" method="post" accept-charset="utf-8">
			<label for="searchtext"><span class="prettyplaceholder">Search</span><input type="text" id="searchtext" class="prettysearch" name="q" /></label>
			<!-- <input type="text" id="searchtext" class="prettysearch" name="q" /> -->
		</form>		
	</div>
</body>
</html>
